<template>
	<div class="detail_main clearfix" @mousemove.stop="mousemoveBox($event)" @mouseup.stop="mouseupBox($event)">
		<div class="detail_others">
			<div class="detail_other hover_active" @click="openReport">
				<img src="@/images/case_itemP101.png" class="normal" />
				<img src="@/images/case_itemP102.png" class="active" />
				<div class="detail_isselectP">诊断报告</div>
			</div>
			<div class="detail_other hover_active" v-if='caseinfo.videoList && caseinfo.videoList.length'>
				<el-dropdown @command="handleCommand" trigger="click" v-if='caseinfo.videoList.length>1'>
					<div class="clearfix">
						<img src="@/images/case_itemP91.png" class="normal" />
						<img src="@/images/case_itemP92.png" class="active" />
						<div class="detail_isselectP">专家讲解</div>
					</div>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item :command='index' v-for='(item,index) in  caseinfo.videoList'>{{item.videoName}}</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<div class="clearfix" @click="handleCommand(0)" v-if='caseinfo.videoList.length == 1'>
					<img src="@/images/case_itemP91.png" class="normal" />
					<img src="@/images/case_itemP92.png" class="active" />
					<div class="detail_isselectP">专家讲解</div>
				</div>
			</div>
			<div class="detail_other hover_active" @click="checkCollect(false)" v-if='collect'>
				<img src="@/images/case_itemP81.png" class="normal" />
				<img src="@/images/case_itemP82.png" class="active" />
				<div class="detail_isselectP">取消收藏</div>
			</div>
			<div class="detail_other hover_active" @click="checkCollect(true)" v-if='!collect'>
				<img src="@/images/case_itemP81.png" class="active" />
				<img src="@/images/case_itemP82.png" class="normal" />
				<div class="detail_isselectP">收藏</div>
			</div>
			<div class="detail_other close" @click="closeItem">
				<img src="@/images/case_item_close.png" class="normal" />
				<div class="detail_isselectP">关闭</div>
			</div>
		</div>
		<dcmviewmain v-if='caseinfo.stuuid' :stuuid='caseinfo.stuuid' :isSimplify='false'></dcmviewmain>
		<div class="index_mask" v-show='videoUrl'>
			<div class="csae_dio_cont video">
				<div class="csae_dio_title">
					{{videoName}}
				</div>
				<div class="csae_dio_close like_btn" @click="closeVideo">
					<i class="el-icon-close"></i>
				</div>
				<div class="csae_dio_main nobar">
					<video :src="baseurl + videoUrl" controls="controls" class="csae_dio_mainvideo" v-if="videoUrl">
					</video>
				</div>
			</div>
		</div>
		<div class="csae_report_cont clearfix" :class="showcase?'active':''" id='report_box' :style="getStyle" v-show='reportShow'>
			<div class="csae_dio_cont report">
				<div class="csae_dio_title drag" @mousedown.stop="mousedownBox($event)">
					填写诊断报告
				</div>
				<el-button type='primary' size='small' @click.stop='showcase = !showcase' class='csae_dio_titleother'>病例病史</el-button>
				<div class="csae_dio_main beautifulScroll">
					<el-row class='csae_dio_mainP1'>
						<el-col :span='24'>
							<div class="csae_dio_mainP2">
								<b>检查部位：</b>{{caseinfo.bodyName}}
							</div>
						</el-col>
					</el-row>
					<el-form :model="reportForm" :rules="rules" ref="reportForm">
						<el-row class='csae_dio_mainP1'>
							<el-col :span='24'>
								<div class="csae_dio_mainP2">
									<b>影像所见：</b>
								</div>
								<div class="csae_dio_mainP4">
									<el-form-item prop="find">
										<el-input type="textarea" :rows="7" resize='none' placeholder="请输入影像所见" v-model="reportForm.find">
										</el-input>
									</el-form-item>
								</div>
							</el-col>
							<el-col :span='24'>
								<div class="csae_dio_mainP2">
									<b>影像结论：</b>
								</div>
								<div class="csae_dio_mainP4">
									<el-form-item prop="diagnosis">
										<el-input type="textarea" :rows="9" resize='none' placeholder="请输入影像结论" v-model="reportForm.diagnosis">
										</el-input>
									</el-form-item>
								</div>
							</el-col>
						</el-row>
					</el-form>
				</div>
				<div class="csae_dio_bottom">
					<el-button type='primary' @click='closeReport'>关闭</el-button>
					<el-button type='primary' @click='openCheck'>提交</el-button>
				</div>
			</div>
			<div class="csae_dio_cont report" v-show="showcase">
				<div class="csae_dio_title">
					患者及病史信息
				</div>
				<div class="csae_dio_close like_btn" @click="closeCase">
					<i class="el-icon-close"></i>
				</div>
				<div class="csae_dio_main beautifulScroll">
					<el-row class='csae_dio_mainP1'>
						<el-col :span='8'>
							<div class="csae_dio_mainP2">
								<b>姓名：</b>{{caseinfo.patientName}}
							</div>
						</el-col>
						<el-col :span='8'>
							<div class="csae_dio_mainP2">
								<b>年龄：</b>{{caseinfo.patientAge}}岁
							</div>
						</el-col>
						<el-col :span='8'>
							<div class="csae_dio_mainP2">
								<b>性别：</b>{{caseinfo.patientSex == "F"?'女':'男'}}
							</div>
						</el-col>
						<el-col :span='8'>
							<div class="csae_dio_mainP2">
								<b>病历号：</b>{{caseinfo.number}}
							</div>
						</el-col>
						<el-col :span='8'>
							<div class="csae_dio_mainP2">
								<b>检查类型：</b><span v-for='item in modalitys' v-if='caseinfo.modalityId == item.modalityId'>{{item.modalityName}}</span>
							</div>
						</el-col>
					</el-row>
					<el-row class='csae_dio_mainP1'>
						<el-col :span='24'>
							<div class="csae_dio_mainP2">
								<b>主诉：</b>{{caseinfo.number}}
							</div>
						</el-col>
					</el-row>
					<el-row class='csae_dio_mainP1'>
						<el-col :span='24'>
							<div class="csae_dio_mainP2">
								<b>既往史：</b>{{medicalHistory0.value || '无'}}
							</div>
						</el-col>
						<el-col :span='24'>
							<div class="csae_dio_mainP2">
								<b>家族史：</b>{{medicalHistory1.value || '无'}}
							</div>
						</el-col>
						<el-col :span='24'>
							<div class="csae_dio_mainP2">
								<b>婚育史：</b>{{medicalHistory2.value || '无'}}
							</div>
						</el-col>
						<el-col :span='24'>
							<div class="csae_dio_mainP2">
								<b>现病史：</b>{{medicalHistory3.value || '无'}}
							</div>
						</el-col>
						<el-col :span='24'>
							<div class="csae_dio_mainP2">
								<b>个人史：</b>{{medicalHistory4.value || '无'}}
							</div>
						</el-col>
					</el-row>
					<el-row class='csae_dio_mainP1 bottom'>
						<el-col :span='24'>
							<div class="csae_dio_mainP2">
								<b>附件：</b> {{!caseinfo.application && !caseinfo.hospitalCase?'无':''}}
								<el-button type='primary' size='small' @click="openImg('application')" v-if='caseinfo.application'>检查申请单</el-button>
								<el-button type='primary' size='small' @click="openImg('hospitalCase')" v-if='caseinfo.hospitalCase'>住院病例</el-button>
							</div>
						</el-col>
					</el-row>
				</div>
			</div>
		</div>
		<div class="index_mask" v-show='caseType'>
			<div class="csae_dio_cont auto">
				<div class="csae_dio_title">
					{{caseType=='application'?'检查申请单':'住院病例'}}
				</div>
				<div class="csae_dio_close like_btn" @click="closeImg">
					<i class="el-icon-close"></i>
				</div>
				<div class="csae_dio_main nobar">
					<img :src="baseurl + caseImg" class="csae_dio_mainimg" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { viewCase, collectStatus, collectCase, caseInfo, saveReport } from '@/api/case.js'
	import { modalityList } from '@/api/image.js'
	import dcmviewmain from '@/components/dcmviewmain.vue'
	export default {
		components: {
			dcmviewmain
		},
		data() {
			return {
				caseId: this.$route.query.caseId,
				collect: false,
				caseinfo: {},
				videoName: '',
				videoUrl: '',
				reportShow: false,
				dataloading: false,
				reportForm: {
					caseId: '',
					find: '',
					diagnosis: '',
				},
				rules: {
					find: [{
						required: true,
						message: '请输入影像所见'
					}],
					diagnosis: [{
						required: true,
						message: '请输入影像结论'
					}],
				},
				moveInfo: {},

				modalitys: [],
				showcase: false,
				medicalHistory0: {
					label: '既往史',
					value: ''
				},
				medicalHistory1: {
					label: '家族史',
					value: ''
				},
				medicalHistory2: {
					label: '婚育史',
					value: ''
				},
				medicalHistory3: {
					label: '现病史',
					value: ''
				},
				medicalHistory4: {
					label: '个人史',
					value: ''
				},
				caseinfo: {},
				caseImg: '',
				caseType: '',
			}
		},
		created() {
			this.setView()
			this.getDataInfo()
			this.getSelectState()
		},
		mounted() {

		},

		computed: {
			getStyle() {
				if(this.moveInfo && this.moveInfo.x && this.moveInfo.y) {
					return "left:" + this.moveInfo.x + "px;top:" + this.moveInfo.y + "px;"
				} else {
					return ''
				}
			},
		},
		methods: {
			closeItem(){
				window.close()
			},
			openCheck() {
				this.dataloading = true;
				setTimeout(_ => {
					this.dataloading = false;
				}, 1000)
				this.$refs.reportForm.validate((valid) => {
					if(valid) {
						var data = Object.assign({}, this.reportForm, {
							caseId: this.caseId,
						})
						saveReport(data).then(async res => {
							if(res.code == '200') {
								this.$alert('检查报告保存成功！', '提示', {
									confirmButtonText: '查看标准报告',
									center: true,
									type: 'success',
								}).then(() => {
									this.$router.replace({
										name: 'casedetail',
										query: {
											caseId: this.caseId,
										}
									})
								}).catch(() => {
									this.$router.replace({
										name: 'casedetail',
										query: {
											caseId: this.caseId,
										}
									})
								})
							} else {
								this.$message({
									message: res.message,
									type: 'error'
								});
							}
						})
					}
				})
			},
			closeImg() {
				this.caseImg = '';
				this.caseType = '';
			},
			openImg(type) {
				this.caseType = type;
				this.caseImg = this.caseinfo[type];
			},
			closeCase() {
				this.showcase = false
			},
			openCase() {
				this.showcase = true
			},
			getArea() {
				var moveInfo = Object.assign({}, this.moveInfo, {
					imgLeft: $('#report_box')[0].offsetLeft,
					imgTop: $('#report_box')[0].offsetTop,
					originalWidth: $('#report_box').width(),
					originalHeight: $('#report_box').height(),
					pageX: '',
					pageY: '',
					moveable: false,
				})
				this.$set(this, 'moveInfo', moveInfo)
			},
			mousedownBox(event) {
				this.getArea(name);
				this.moveInfo.pageX = event.pageX;
				this.moveInfo.pageY = event.pageY;
				this.moveInfo.moveable = true;
			},
			mousemoveBox(event) {
				if(this.moveInfo.moveable) {
					var left = this.moveInfo.imgLeft + (event.pageX - this.moveInfo.pageX);
					var top = this.moveInfo.imgTop + (event.pageY - this.moveInfo.pageY);
					this.moveInfo.x = left;
					this.moveInfo.y = top;
				}
			},
			mouseupBox(event, name) {
				this.moveInfo.moveable = false;
			},
			closeReport() {
				this.reportShow = false;
			},
			openReport() {
				this.reportShow = true;
			},
			closeVideo() {
				this.videoUrl = '';
				this.videoName = '';
			},
			openVideo(item) {
				this.videoName = item.videoName;
				this.videoUrl = item.videoUrl;
			},
			handleCommand(index) {
				this.openVideo(this.caseinfo.videoList[index])
			},
			getModalityList() {
				modalityList({}).then(res => {
					this.modalitys = res.data || [];
				})
			},
			getDataInfo() {
				caseInfo({
					caseId: this.caseId,
				}).then(res => {
					this.caseinfo = res.data || {};
					if(this.caseinfo.medicalHistory) {
						var medicalHistory = JSON.parse(this.caseinfo.medicalHistory);
						medicalHistory.map(item => {
							this[item.name] = item
						})
					}
				})
			},
			getSelectState() {
				collectStatus({
					caseId: this.caseId,
				}).then(res => {
					this.collect = res.data || false
				})
			},
			checkCollect(collect) {
				var message = collect ? '确定收藏此案例?' : '确定取消收藏此案例?'
				this.$confirm(message, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(() => {
					collectCase({
						caseId: this.caseId,
						collect
					}).then(res => {
						if(res.code == 200) {
							this.getSelectState()
						} else {
							this.$message({
								type: 'error',
								message: res.message
							})
						}
					})
				}).catch(() => {})

			},
			setView() {
				viewCase({
					caseId: this.caseId
				})
			},
		},
	}
</script>